import React,{useEffect, useMemo} from "react";
import style from './index.module.less'
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components';
import { MapChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import {world} from '../../utils/world'

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  VisualMapComponent,
  GeoComponent,
  MapChart,
  CanvasRenderer
]);

const Map = ()=>{

    let option = useMemo(()=>{
      let option = {
        title: {
          text: '重庆邮电大学境外办学数据大盘',
          subtext: '留学生分布',
          sublink: 'http://www.census.gov/popest/data/datasets.html',
          left: 'center',
          top:"5%"
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function (params) {
            const value = (params.value + '').split('.');
            const valueStr = value[0].replace(
              /(\d{1,3})(?=(?:\d{3})+(?!\d))/g,
              '$1,'
            );
            return params.seriesName + '<br/>' + params.name + ': ' + valueStr;
          }
        },
        visualMap: {
          left: 'right',
          min: 0,
          max: 2000,
          inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
          },
          text: ['High', 'Low'],
          calculable: true
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: 'left',
          top: 'top',
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: 'world overseas students',
            type: 'map',
            roam: true,
            map: 'world',
            emphasis: {
              label: {
                show: true
              }
            },
            data: [
              { name: 'China',value:200},
              { name: 'Japan',value:1000},
              { name: 'Canada',value:1200}
            ]
          }
        ]
      }
      return option
    },[])

    useEffect(()=>{
      let chartDom = document.getElementById("mapmain");
      let myChart = echarts.init(chartDom,'dark');
      echarts.registerMap('world',world);
      myChart.setOption(option)
    },[])

    return(
        <div>
            <div id = "mapmain" className={style.mapcontainer}></div>
        </div>
    )
}

export default Map